<template>
  <div class="pager-info" v-loading="loading">
    <div v-if="loading" class="pager-loading"></div>
    <template v-else>
      <proposed-pager
        v-if="approvalType === 'Receipt'"
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
        ref="proposedPager"
      />
      <upload-approval-sheet
        v-else-if="approvalType === 'upload'"
        ref="uploadSheet"
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
      />
      <use-car-pager
        v-else-if="approvalType === 'useCar'"
        ref="useCarSheet"
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
      />
      <office-buy-pager
        v-else-if="approvalType === 'officeBuy'" 
        ref="officeBuy" 
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
      />
      <witten
        v-else-if="approvalType === 'holiday'"
        ref="wittenSheet"
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
        :processCode="processCode"
      />
      <approve-pager
        v-else
        :pager="pager"
        :queryData="queryData"
        :pointData="pointData"
        ref="approvePager"
      />
    </template>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getTaskInfoByUserIdAndTaskId } from "@/api/workflow.js";
import { getTaskInfo } from "@/api/work.js";
import { parseTime } from "@/utils/index.js";
export default {
  name: "taskHandlePager",
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    processCode: {
      type: String
    },
    taskId: {
      type: Number,
    },
  },
  components: {
    ApprovePager: () =>
      import("@/views/markSys/taskCenter/components/ApprovePager"),
    ProposedPager: () =>
      import("@/views/markSys/taskCenter/components/ProposedPager"),
    UploadApprovalSheet: () => import('@/views/markSys/reportMaterials/UploadApproval/Sheet'),
    UseCarPager: () =>
      import("@/views/markSys/taskCenter/components/UserCarPager"),
    OfficeBuyPager: () => import('@/views/markSys/components/OfficeBuy/index'),
    Witten: () => import('@/views/markSys/components/Witten/index')
  },
  watch: {
    pager: {
      handler(data) {
        this.approvalType = data.approval_type
      },
      immediate:　true
    },
  },
  data() {
    return {
      pointData: [], // 审批记录
      queryData: {},
      loading: true,
      approvalType: ''
    };
  },
  mounted() {
    this.requestCommenthi();
  },
  computed: {
    ...mapGetters(["id", "name"]),
    // 根据processDesc 判断是否属于州委收文
    isZWReceipt() {
      const { approval_type } = this.pager;
      return approval_type == "Receipt";
    },
  },
  methods: {
    parseTime,
    // 获取审批记录
    requestCommenthi() {
      if (this.taskId) {
        this.loading = true;
        getTaskInfoByUserIdAndTaskId({
          userId: this.id,
          bussKey: this.taskId,
        }).then((res) => {
          const { comment, fromData } = res.data.data;
          if (!this.queryData.variables && fromData) {
            this.queryData.variables = {
              fromData:
                typeof fromData == "stirng" ? JSON.parse(fromData) : fromData,
            };
          }
          this.loading = false;
          this.pointData = comment;
        });
      }
    },
  },
};
</script>
<style lang="scss">
.pager-info {
  margin: 0 20px 20px;
  overflow-x: hidden;
  .pager-loading {
    height: 400px;
  }
}
</style>
